import { Menu } from 'antd';
import bases from './Bases'
import 'antd/dist/antd.css';
import React, { Component } from 'react'


const { SubMenu } = Menu;


class Sider extends React.Component {
  
handleClick = e => {
    // let item1=event.target.value
    // this.setState({itemss:item1})
    console.log('click ', e);
}
 
// _MenuClick = (e,index) => {
//     this.props._changeitem(index)
//     console.log('click',e)
//     alert('sad')
 
// }

// _Subchange=(index)=>{
//     this.props._changebase(index)

// }


  render() {
      let base=bases.slice(0)
      let current=this.props.current.slice(0)
      // let baseItems=base[1].items.slice(0)
    return (
      <Menu
        // onClick={this.handleClictk}
        // onClick={()=>this.props._changebase()}
        style={{ width: 256 }}
        defaultSelectedKeys={[]}
        defaultOpenKeys={[]}
        mode="inline"
      >
      {base.map((item,index)=>{
          return <SubMenu onClick={()=>this.props._changebase(index)} key={item.index} title={item.baseName}>
              {current.map((item,index)=>{
                  return<Menu.Item key={item.index} onClick={()=>this.props._changeitem(index)} >{item.name}</Menu.Item>
                        
              })}
          </SubMenu>
          })}
      </Menu>
    );
  }
}


class Cards extends Component {
  render() {
    let item1=this.props.item1
    return (
      <div>
        {item1.itemss.map((item)=>{
            return<div key={item.id}>
                <h4>名称：{item.name}</h4>
                <p>价格：{item.price}</p>
            </div>
        })}
      </div>
    )
  }
}


export default class Test extends Component {
    constructor(props) {
        super(props)
        // this._changebase=this._changebase.bind(this)
        // this._changeitem=this._changeitem.bind(this)
        
    
        this.state = {
            bases,
            current: bases[0].items,
            item1:bases[0].items[0].itemss
               
          }
    }

    _changebase=(index)=>{
      let current=this.state.bases[index].items
      // let item1=item[cid].itemss
      this.setState({current})
    }

    _changeitem=(index)=>{
      let item1=this.state.current[index].itemss
      // let item1=item[cid].itemss
      this.setState({item1})
    }


    render() {
        let base=bases.slice(0)
        return (
            <div>
                <Sider current={this.state.current} item1={this.state.item1} _changebase={(index)=>this._changebase(index)} _changeitem={(index)=>this._changeitem(index)}></Sider>
                <div>
                  {/* <Cards item1={this.state.item1}></Cards> */}
                    {this.state.item1.map(item=>{
                        return<div key={item.id}>
                            <h4>名称：{item.name}</h4>
                            <p>价格：{item.price}</p>
                        </div>
                    })}
                </div>
            </div>
        )
    }
}